<template>
<div class="table-responsive">
  <!-- <table class="table table-bordered">
    <tbody>
      <tr v-for="item in list">
        <td :style="{width: width}">{{item.name}}</td>
        <td>{{item.value}}</td>
      </tr>
    </tbody>
  </table>         -->
   <table border="1" bordercolor="#ddd" style="border-collapse:collapse;">
       <tbody>
        <tr v-for="item in this.list" style="height:40px;">
        <td style="width:20%;">{{item.name}}</td>
        <td style="width:870px;" v-html="item.value"></td>
      </tr>
    </tbody>
    </table>
</div>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: "30%"
    },
    list: {
      required: true
    }
  },
  methods: {
    showValue(item) {
      if (item.show) {
        return item.show(item.value);
      } else {
        return item.value;
      }
    }
  }
};
</script>

<style >
table {
  border-spacing: 0;
  border-collapse: collapse;
  background-color: transparent;
  width: 100%;
  max-width: 100%;
  /* margin-bottom: 20px; */
  text-align: left;
  font-size: 15px;
}
.table-bordered, 
.table-bordered>tbody>tr>td, 
.table-bordered>tbody>tr>th, 
.table-bordered>tfoot>tr>td, 
.table-bordered>tfoot>tr>th, 
.table-bordered>thead>tr>td, 
.table-bordered>thead>tr>th {
    border: 1px solid #ddd;
}
tr{
  height: 25px;
}
</style>